<template>
  <page-view class="menu">
    <page-header :showBack="true"></page-header>

    <div class="content-box" ref="contentBoxDOM" @scroll="contentBoxScroll($event)">
      <div class="header-box">
        <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <swipe-item v-for="(item, index) in bannerImg" :key="index">
            <van-image :src="item" width="100%" height="200" fit="cover"></van-image>
          </swipe-item>
        </swipe>

        <div class="query-box" @click="$router.push({ name: searchFood })">
          <input type="text" class="query-text" readonly placeholder="请输入" />
          <button class="query-btn">搜索</button>
        </div>
      </div>
    </div>
  </page-view>
</template>

<script>
import { reactive, ref } from "vue";
import { Swipe, SwipeItem, Image as VanImage } from "vant";
import Api from "../utils/api";
export default {
  name: "Menu",
  components: { Swipe, SwipeItem, VanImage },
  setup() {
    let contentBoxDOM = ref(null);
    function contentBoxScroll(e) {}
    let bannerImg = reactive([
      require("../assets/image/01.jpg"),
      require("../assets/image/02.jpg"),
      require("../assets/image/03.jpg"),
      require("../assets/image/04.jpg"),
    ]);

    return { bannerImg, contentBoxScroll, contentBoxDOM };
  },
};
</script>

<style lang="scss" scoped>
.menu {
  display: flex;
  flex-direction: column;

  .content-box {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 60px;
    .header-box {
      position: relative;
      .query-box {
        position: absolute;
        top: 10px;
        left: 40px;
        right: 40px;
        display: flex;
        height: 30px;
        .query-text {
          flex: 1;
          border: none;
          box-sizing: border-box;
          padding: 0px 10px;
          outline: none;
          background-color: rgba(#ffffff, 0.5);
        }
        .query-btn {
          width: 45px;
          font-size: 14px;
          border: none;
          outline: none;
        }
      }
    }
  }
}
</style>
